<!DOCTYPE html>
<!-- 根-->
<html lang="en">
<!-- 头-->
<head>
<!--    文件采用什么字符集, 这里就是什么字符集, 告诉浏览器你这个文件是什么字符集的-->
<!--    这一行的代码的作用是告诉浏览器这个文件是什么字符编码的, 不是让浏览器以什么编码-->
    <meta charset="UTF-8">
    <!--     网页标题-->
    <title>Title</title>
</head>
<!-- 体-->
<!--设置背景图片 和背景颜色-->
<!--如果图片铺不满, 就重复-->
<!--<body background="../src/test0409/IMG_20190907_171230.jpg" bgcolor="red">-->
<body>
<!--HTML 不区分大小写, 语法松散不严格-->
    <!--基本标签讲解-->
    <p>段落标记</p>
    <!--    标题字 h1 到 h6-->
    <h1>标题1</h1>
    <!--    换行-->
    hello<br>world
    <!--    横线, 横线和换行都是独木标记-->
    <br>
    <br>
    <hr>
    <hr color="red" width="50%">

    预留格式
    for (int i = 0; i < 100; i++) {
        System.out.println(i);
    }
    使用 pre 标签可以让你输入什么格式就是什么格式
    <pre>
        for (int i = 0; i < 100; i++) {
        System.out.println(i);
        }
    </pre>
    <del>删除字</del>
    <ins>插入字</ins>
    <b>粗体字</b>
    <i>斜体字</i>
    右上角加字
    10<sup>2</sup>
    右下角加字
    10<sub>m</sub>
    <font color="red" size="25">字体标签</font>



    实体符号 以 & 开始, 以 ; 结束
    = 和别的符号不冲突
    空格为&nbsp;
    <br>
    a&nbsp;b&nbsp;c&nbsp;d&nbsp;e&nbsp;f&nbsp;g
    <br>
<!--    b<a>c-->
    小于号&lt;  大于号&gt;


    表格
    table 表示整个表格, tr 是一行, td 是一列
    <br>
    没有线, 设置边框为1像素 border="1px"
    <br>
    width="60%" 整个窗口宽度的 60% , 根据窗口的大小变化, 同比例缩放
    align 加在 table 中是整个表格的位置居中, 加在 tr 是行中的数据居中
    <table border="1px" width="60%" height="150px" align="center">
        <!-- align 对齐方式-->
        <tr align="center">
            <td>a</td> <td>b</td> <td>c</td>
        </tr>
        <tr>
            <td>d</td> <td>e</td> <td>f</td>
        </tr>
        <tr>
            <td>g</td> <td>h</td> <td>i</td>
        </tr>
    </table>



    <br>
    <br>
    <br>
    单元格合并 ,
    竖向合并 : 先将上方的格子删除, 然后在他旁边的格子加上属性 rowspan
    横向合并 : 随便删一个格子, 在他旁边的格子加上 colspan 属性
    span 后面的值 你合并几个你就写几

    <br>
    th 标签也是单元格标签, 但是它加粗和居中, 比较适合作为单元格的第一行
    <table border="1px" width="150px">
        <tr>
            <th>1</th> <th>1</th> <th>1</th>
        </tr>
        <tr>
            <td>1</td> <td>1</td> <td>1</td>
        </tr>
        <tr>
            <td>1</td> <td>1</td> <td rowspan="2">1</td>
        </tr>
        <tr>
            <td colspan="2">1</td>
        </tr>
    </table>

    表格是可以分割的 thead , tbody , tfoot 这样做便于 js 的编写
    <table border="1px" width="150px">
<!--        头-->
        <thead>
            <tr>
                <th> 1 </th> <th> 1 </th> <th> 1 </th>
            </tr>
        </thead>
<!--        体-->
        <tbody>
            <tr>
                <td> 1 </td> <td> 1 </td> <td> 1 </td>
            </tr>
            <tr>
                <td> 1 </td> <td> 1 </td> <td> 1 </td>
            </tr>
        </tbody>
<!--        脚-->
        <tfoot>
            <tr>
                <td> 1 </td> <td> 1 </td> <td> 1 </td>
            </tr>
        </tfoot>
    </table>

    <br>
    <br>
    <br>
    <br>

    设置图片的时候, 只设置图片的宽度, 高度会等比例缩放
    如果高度和宽度都设置, 会失真
    title设置鼠标悬停时候的字
    alt是图片加载失败时候(网速不好, 或者图片不存在)显示的属性
    <img src="../src/test0409/bb.jpg" width="100px" title="我是海绵宝宝" alt="图片找不到哦"/>
    开始标签和结束标签之间要是没有东西, 可以在开始标签之后加上/就不用写结束标签了, 比如 img 标签
    <br>
    <br>
    <br>
    <br>
    <br>

    超链接
    <a href="http://baidu.com">百度</a>

    图片超链接
    <a href="http://baidu.com">
        <img src="../src/test0409/bb.jpg" width="100px" title="图片超链接" alt="图片找不到哦"/>
    </a>

    target属性如果为_blank, 新窗口加载, _self或者不写该属性, 当前窗口
    <a href="http://baidu.com" target="_blank">百度</a>

    超链接的作用, 通过超链接可以从浏览器向服务器发送数据 request请求
    服务器向浏览器发送数据 response 响应

    B/S 结构的系统每一个请求都会对应一个响应
    从本质上讲, 用户从地址栏输入一个URL点击和直接点击超链接是一样的, 都是向服务器发送请求
    <br>
    <br>
    <br>
    <br>

    列表, 列表可以嵌套
    无序列表
    <ul>
        <li>
            北京
        </li>
        <li>
            天津
        </li>
    </ul>
    有序列表, 属性type, a代表序号为abc, I代表罗马字符,
    <ol>
        <li>
            西瓜
        </li>
        <li>
            桃子
        </li>
    </ol>



</body>
</html>


